<template>
  <n-card :bordered="false">
    <n-tabs  type="line" tab-style="font-weight: 500;" @update:value="getSettings">
      <n-tab-pane name="basic" tab="基本设置" v-if="hasPermission('setting:basic')">
        <n-form
            ref="basic_form"
            :model="basicForm"
            :rules="basicFormRules"
            require-mark-placement="left"
            label-placement="left" :label-width="90">
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" label="网站名称:" path="title">
              <n-input v-model:value="basicForm.title" placeholder="网站名称" maxlength="30" show-count clearable/>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" label="网站Logo:" path="logo">
              <div>
                <div class="select-img" style="width: 110px;height: 110px;"
                     :class="appStore.theme=='light'?'light-img':'dark-img'">
                  <div class="select-img-img-clear" v-if="basicForm.logo" @click.stop="clearSelectedImg('logo')">
                    <n-icon :size="16">
                      <Close/>
                    </n-icon>
                  </div>
                  <div class="select-img-img" @click.stop="()=>(show_imgs=true,add_img_filed='logo')">
                    <template v-if="basicForm.logo">
                      <img :src="Config.VIEW_FILE+basicForm.logo" style="object-fit: contain;width: 100%;height: 100%"
                           alt="">
                    </template>
                    <template v-else>
                      <p style="margin-block-start: 0;margin-block-end: 0;">添加图片</p>
                    </template>
                  </div>
                </div>
              </div>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" label="联系人:" path="contacts">
              <n-input v-model:value="basicForm.contacts" placeholder="联系人" maxlength="30" show-count
                       clearable/>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" label="联系电话:" path="phone">
              <n-input v-model:value="basicForm.phone" maxlength="11" show-count placeholder="联系电话"
                       clearable/>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" label="版权信息:" path="copyright">
              <n-input v-model:value="basicForm.copyright" placeholder="版权信息" clearable/>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" label="ICP备案号:" path="icp">
              <n-input v-model:value="basicForm.icp" placeholder="ICP备案号" clearable/>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" label="备案号链接:" path="icp_url">
              <n-input v-model:value="basicForm.icp_url" placeholder="请输入链接，例如：http://www.beian.gov.cn"
                       clearable/>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" label="&nbsp;">
              <n-button type="primary" @click="handelSave($event,'basic')">保存</n-button>
            </n-form-item-gi>
          </n-grid>
        </n-form>
      </n-tab-pane>
      <n-tab-pane name="customer" tab="客服设置" v-if="hasPermission('setting:customer')">
        <div class="scrollbar" :style="{height:(height)+'px',overflow:'auto'}">
          <n-form
              ref="customer_form"
              :model="customerForm"
              require-mark-placement="left"
              label-placement="left" :label-width="90">
            <p><span class="titles">客服一</span></p>
            <n-grid :cols="24" :x-gap="24">
              <n-form-item-gi :span="8" label="客服名称:" path="name">
                <n-input v-model:value="customerForm.name" placeholder="客服一名称" maxlength="20" show-count
                         clearable/>
              </n-form-item-gi>
            </n-grid>
            <n-grid :cols="24" :x-gap="24">
              <n-form-item-gi :span="8" label="客服电话:" path="phone">
                <n-input v-model:value="customerForm.phone" placeholder="客服一电话" maxlength="11" show-count
                         clearable/>
              </n-form-item-gi>
            </n-grid>
            <n-grid :cols="24" :x-gap="24">
              <n-form-item-gi :span="8" label="二维码:" path="qr_code" :show-feedback="false">
                <div>
                  <div class="select-img" style="width: 80px;height: 80px;"
                       :class="appStore.theme=='light'?'light-img':'dark-img'">
                    <div class="select-img-img-clear" v-if="customerForm.qr_code"
                         @click.stop="clearSelectedImg('qr_code')">
                      <n-icon :size="16">
                        <Close/>
                      </n-icon>
                    </div>
                    <div class="select-img-img" @click.stop="()=>(show_imgs=true,add_img_filed='qr_code')">
                      <template v-if="customerForm.qr_code">
                        <img :src="Config.VIEW_FILE+customerForm.qr_code"
                             style="object-fit: contain;width: 100%;height: 100%" alt="">
                      </template>
                      <template v-else>
                        <p style="margin-block-start: 0;margin-block-end: 0;">添加图片</p>
                      </template>
                    </div>
                  </div>
                </div>
              </n-form-item-gi>
            </n-grid>
            <p><span class="titles">客服二</span></p>
            <n-grid :cols="24" :x-gap="24">
              <n-form-item-gi :span="8" label="客服名称:" path="name1">
                <n-input v-model:value="customerForm.name1" placeholder="客服二名称" maxlength="20" show-count
                         clearable/>
              </n-form-item-gi>
            </n-grid>
            <n-grid :cols="24" :x-gap="24">
              <n-form-item-gi :span="8" label="客服电话:" path="phone1">
                <n-input v-model:value="customerForm.phone1" placeholder="客服二电话" maxlength="11" show-count
                         clearable/>
              </n-form-item-gi>
            </n-grid>
            <n-grid :cols="24" :x-gap="24">
              <n-form-item-gi :span="8" label="二维码:" path="qr_code1" :show-feedback="false">
                <div>
                  <div class="select-img" style="width: 80px;height: 80px;"
                       :class="appStore.theme=='light'?'light-img':'dark-img'">
                    <div class="select-img-img-clear" v-if="customerForm.qr_code1"
                         @click.stop="clearSelectedImg('qr_code1')">
                      <n-icon :size="16">
                        <Close/>
                      </n-icon>
                    </div>
                    <div class="select-img-img" @click.stop="()=>(show_imgs=true,add_img_filed='qr_code1')">
                      <template v-if="customerForm.qr_code1">
                        <img :src="Config.VIEW_FILE+customerForm.qr_code1"
                             style="object-fit: contain;width: 100%;height: 100%" alt="">
                      </template>
                      <template v-else>
                        <p style="margin-block-start: 0;margin-block-end: 0;">添加图片</p>
                      </template>
                    </div>
                  </div>
                </div>
              </n-form-item-gi>
            </n-grid>
            <p><span class="titles">客服三</span></p>
            <n-grid :cols="24" :x-gap="24">
              <n-form-item-gi :span="8" label="客服名称:" path="name2">
                <n-input v-model:value="customerForm.name2" placeholder="客服三名称" maxlength="20" show-count
                         clearable/>
              </n-form-item-gi>
            </n-grid>
            <n-grid :cols="24" :x-gap="24">
              <n-form-item-gi :span="8" label="客服电话:" path="phone2">
                <n-input v-model:value="customerForm.phone2" placeholder="客服三电话" maxlength="11" show-count
                         clearable/>
              </n-form-item-gi>
            </n-grid>
            <n-grid :cols="24" :x-gap="24">
              <n-form-item-gi :span="8" label="二维码:" path="qr_code2" :show-feedback="false">
                <div>
                  <div class="select-img" style="width: 80px;height: 80px;"
                       :class="appStore.theme=='light'?'light-img':'dark-img'">
                    <div class="select-img-img-clear" v-if="customerForm.qr_code2"
                         @click.stop="clearSelectedImg('qr_code2')">
                      <n-icon :size="16">
                        <Close/>
                      </n-icon>
                    </div>
                    <div class="select-img-img" @click.stop="()=>(show_imgs=true,add_img_filed='qr_code2')">
                      <template v-if="customerForm.qr_code2">
                        <img :src="Config.VIEW_FILE+customerForm.qr_code2"
                             style="object-fit: contain;width: 100%;height: 100%" alt="">
                      </template>
                      <template v-else>
                        <p style="margin-block-start: 0;margin-block-end: 0;">添加图片</p>
                      </template>
                    </div>
                  </div>
                </div>
              </n-form-item-gi>
            </n-grid>
            <n-grid :cols="24" :x-gap="24">
              <n-form-item-gi :span="8" label="&nbsp;" :show-feedback="false" style="margin-top: 15px;">
                <n-button type="primary" @click="handelSave($event,'customer')">保存</n-button>
              </n-form-item-gi>
            </n-grid>
          </n-form>
        </div>
      </n-tab-pane>
      <n-tab-pane name="users" tab="用户设置" v-if="hasPermission('setting:user')">
        <n-form
            ref="user_form"
            :model="userForm"
            require-mark-placement="left"
            label-placement="left" :label-width="100">
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" label="用户默认头像:" path="default_avatar" :show-feedback="false">
              <div>
                <div class="select-img" style="width: 80px;height: 80px;"
                     :class="appStore.theme=='light'?'light-img':'dark-img'">
                  <div class="select-img-img-clear" v-if="userForm.default_avatar"
                       @click.stop="clearSelectedImg('default_avatar')">
                    <n-icon :size="16">
                      <Close/>
                    </n-icon>
                  </div>
                  <div class="select-img-img" @click.stop="()=>(show_imgs=true,add_img_filed='default_avatar')">
                    <template v-if="userForm.default_avatar">
                      <img :src="Config.VIEW_FILE+userForm.default_avatar"
                           style="object-fit: contain;width: 100%;height: 100%" alt="">
                    </template>
                    <template v-else>
                      <p style="margin-block-start: 0;margin-block-end: 0;">添加图片</p>
                    </template>
                  </div>
                </div>
              </div>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24" class="m-t-10">
            <n-form-item-gi :span="10" label="开启邀请下级" :show-feedback="false">
              <div style="width: 100%" class="m-t-5">
                <n-switch :round="false" v-model:value="userForm.invite_next" :checked-value="1" :unchecked-value="0">
                  <template #checked>
                    开启
                  </template>
                  <template #unchecked>
                    关闭
                  </template>
                </n-switch>
                <p class="tips_p" style="margin-block-start: 0.5em;">
                  系统是否开启邀请下级功能，关闭功能后用户之间不能建立新的上下级关系。</p>
              </div>
            </n-form-item-gi>
          </n-grid>
          <!--          <n-grid :cols="24" :x-gap="24">-->
          <!--            <n-form-item-gi :span="8" label="邀请下级资格">-->

          <!--            </n-form-item-gi>-->
          <!--          </n-grid>-->
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="16" label="成为下级条件" path="bas_condition">
              <div style="width: 100%" class="m-t-5">
                <n-checkbox v-model:checked="userForm.bas_condition">
                  首次绑定邀请码
                </n-checkbox>
                <p class="tips_p" style="margin-block-start: 0.5em;">
                  用户登录后首次绑定邀请码建立上下级关系。包括扫码，点击分享链接，输入邀请码等场景。</p>
              </div>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" label="&nbsp;" :show-feedback="false" style="margin-top: 15px;">
              <n-button type="primary" @click="handelSave($event,'user')">保存</n-button>
            </n-form-item-gi>
          </n-grid>
        </n-form>
      </n-tab-pane>
      <n-tab-pane name="withdrawal" tab="提现设置" v-if="hasPermission('setting:withdrawal')">
        <n-form
            ref="withdrawal_form"
            :model="withdrawalForm"
            :rules="withdrawalFormRules"
            require-mark-placement="left"
            label-placement="left" :label-width="110">
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="16" label="提现方法" path="way">
              <div style="width: 100%" class="m-t-5">
                <n-checkbox-group v-model:value="withdrawalForm.way">
                  <n-space item-style="display: flex;">
                    <n-checkbox value="balance" label="账户余额(默认)"/>
                    <n-checkbox value="wechat_change" label="微信零钱"/>
                    <n-checkbox value="wechat_pay_code" label="微信收款码"/>
                    <n-checkbox value="alipay_code" label="支付宝收款码"/>
                    <n-checkbox value="bank" label="银行卡"/>
                  </n-space>
                </n-checkbox-group>
                <p class="tips_p" style="margin-block-start: 0.5em;">默认需要保留至少一种提现方法</p>
              </div>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="16" label="微信零钱接口" path="change_interface" :show-feedback="false">
              <div style="width: 100%" class="m-t-5">
                <n-radio-group v-model:value="withdrawalForm.change_interface" name="change_interface">
                  <n-space>
                    <n-radio key="enterprise" value="enterprise" label="企业付款到零钱"/>
                    <n-radio key="merchant" value="merchant" label="商家转账到零钱"/>
                  </n-space>
                </n-radio-group>
                <p class="tips_p" style="margin-block-start: 0.5em;">选择商家转账到零钱时，运营账户必须有钱才能提现</p>
              </div>
            </n-form-item-gi>
          </n-grid>
          <p><span class="titles">用户提现设置</span></p>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" label="最低提现金额" path="user_min_money">
              <div style="width: 100%">
                <n-input-group>
                  <n-input-number v-model:value="withdrawalForm.user_min_money"
                                  style="width: 200px" :show-button="false"
                                  :precision="2"
                                  clearable placeholder="用户最低提现金额"/>
                  <n-input-group-label>元</n-input-group-label>
                </n-input-group>
                <p class="tips_p" style="margin-block-start: 0.5em;">会员提现需满足最低提现金额。才能提交提现申请。</p>
              </div>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" label="最高提现金额" path="user_max_money">
              <n-input-group>
                <n-input-number v-model:value="withdrawalForm.user_max_money"
                                style="width: 200px" :show-button="false"
                                :precision="2"
                                clearable placeholder="用户最高提现金额"/>
                <n-input-group-label>元</n-input-group-label>
              </n-input-group>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" label="提现手续费" path="user_fees">
              <div style="width: 100%">
                <n-input-group>
                  <n-input-number v-model:value="withdrawalForm.user_fees"
                                  style="width: 200px" :show-button="false"
                                  clearable placeholder="请输入用户提现手续费"/>
                  <n-input-group-label>%</n-input-group-label>
                </n-input-group>
                <p class="tips_p" style="margin-block-start: 0.5em;">会员提现需满足最低提现金额。才能提交提现申请。</p>
              </div>
            </n-form-item-gi>
          </n-grid>
          <p><span class="titles">教师提现设置</span></p>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" label="最低提现金额" path="teacher_min_money">
              <div style="width: 100%">
                <n-input-group>
                  <n-input-number v-model:value="withdrawalForm.teacher_min_money"
                                  style="width: 200px" :show-button="false"
                                  :precision="2"
                                  clearable placeholder="教师最低提现金额"/>
                  <n-input-group-label>元</n-input-group-label>
                </n-input-group>
                <p class="tips_p" style="margin-block-start: 0.5em;">会员提现需满足最低提现金额。才能提交提现申请。</p>
              </div>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" label="最高提现金额" path="teacher_max_money">
              <n-input-group>
                <n-input-number v-model:value="withdrawalForm.teacher_max_money"
                                style="width: 200px" :show-button="false"
                                :precision="2"
                                clearable placeholder="教师最高提现金额"/>
                <n-input-group-label>元</n-input-group-label>
              </n-input-group>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" label="提现手续费" path="teacher_fees">
              <div style="width: 100%">
                <n-input-group>
                  <n-input-number v-model:value="withdrawalForm.teacher_fees"
                                  style="width: 200px" :show-button="false"
                                  clearable placeholder="请输入教师提现手续费"/>
                  <n-input-group-label>%</n-input-group-label>
                </n-input-group>
                <p class="tips_p" style="margin-block-start: 0.5em;">会员提现需满足最低提现金额。才能提交提现申请。</p>
              </div>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" label="&nbsp;" :show-feedback="false" style="margin-top: 15px;">
              <n-button type="primary" @click="handelSave($event,'withdrawal')">保存</n-button>
            </n-form-item-gi>
          </n-grid>
        </n-form>
      </n-tab-pane>
      <n-tab-pane name="sms" tab="短信设置" v-if="hasPermission('setting:sms')">
        <n-alert type="warning" class="alert_small m-b-10">
          注意: 短信渠道只能开启一个，选择一个启用后，其他的会自动关闭
        </n-alert>
        <n-form
            ref="sms_form"
            :model="smsForm"
            :rules="smsFormRules"
            require-mark-placement="left"
            label-placement="left" :label-width="130">
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="6" label="短信渠道" path="type">
              <n-select v-model:value="smsForm.type" :options="sMSOptions" style="width: 150px;"
                        @update:value="changeSMSKey"/>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" label="开启状态" path="enable">
              <n-radio-group v-model:value="smsForm.enable" name="enable">
                <n-space>
                  <n-radio :value="0" key="0" label="关闭"/>
                  <n-radio :value="1" key="1" label="开启"/>
                </n-space>
              </n-radio-group>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" label="短信签名" path="signature">
              <n-input v-model:value="smsForm.signature" maxlength="12" show-count placeholder="请输入短信签名"
                       clearable/>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" :label="smsForm.type=='tencent'?'APP_ID':'APP_KEY'" path="app_id_key">
              <div style="width: 100%">
                <n-input v-model:value="smsForm.app_id_key"
                         :placeholder="smsForm.key=='tencent'?'请输入短信平台APP_ID':'请输入短信平台APP_KEY'"
                         clearable/>
                <p class="tips_p">短信渠道选择腾讯云短信是APP_KEY则是APP_ID</p>
              </div>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24" v-if="smsForm.type=='tencent'">
            <n-form-item-gi :span="8" label="SECRET_ID" path="secret_id">
              <n-input v-model:value="smsForm.secret_id" placeholder="请输入短信平台SECRET_ID" clearable/>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" label="SECRET_KEY" path="secret_key">
              <n-input v-model:value="smsForm.secret_key" placeholder="请输入短信平台SECRET_KEY" clearable/>
            </n-form-item-gi>
          </n-grid>
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="8" label="&nbsp;" :show-feedback="false" style="margin-top: 15px;">
              <n-button type="primary" @click="handelSave($event,'sms')">保存</n-button>
            </n-form-item-gi>
          </n-grid>
        </n-form>
      </n-tab-pane>
      <n-tab-pane name="policy_a" tab="政策协议" v-if="hasPermission('setting:policy_a')">
        <n-form
            ref="policy_a_form"
            :model="policyForm"
            require-mark-placement="left"
            label-placement="left" :label-width="110">
          <div class="scrollbar" :style="{height:(height)+'px',overflow:'auto'}">
            <p><span class="titles">服务协议</span><span class="muted">用户登录注册页面显示服务协议</span></p>
            <n-grid :cols="24" :x-gap="24">
              <n-form-item-gi :span="6" label="协议名称:" path="service">
                <n-input v-model:value="policyForm.service" placeholder="" clearable/>
              </n-form-item-gi>
            </n-grid>
            <n-grid :cols="24" :x-gap="24">
              <n-form-item-gi :span="24" label="协议内容:" path="service_cont">
                <Editor v-model:value="policyForm.service_cont"/>
              </n-form-item-gi>
            </n-grid>
            <n-divider/>
            <p><span class="titles">隐私协议</span><span class="muted">用户登录注册页面显示隐私政策</span></p>
            <n-grid :cols="24" :x-gap="24">
              <n-form-item-gi :span="6" label="协议名称:" path="privacy">
                <n-input v-model:value="policyForm.privacy" placeholder="" clearable/>
              </n-form-item-gi>
            </n-grid>
            <n-grid :cols="24" :x-gap="24">
              <n-form-item-gi :span="24" label="协议内容:" path="privacy_cont">
                <Editor v-model:value="policyForm.privacy_cont"/>
              </n-form-item-gi>
            </n-grid>
            <n-divider/>
            <p><span class="titles">注销协议</span><span class="muted">用户注销页面显示注销协议</span></p>
            <n-grid :cols="24" :x-gap="24">
              <n-form-item-gi :span="6" label="协议名称:" path="reg">
                <n-input v-model:value="policyForm.reg" placeholder="" clearable/>
              </n-form-item-gi>
            </n-grid>
            <n-grid :cols="24" :x-gap="24">
              <n-form-item-gi :span="24" label="协议内容:" path="reg_cont">
                <Editor v-model:value="policyForm.reg_cont"/>
              </n-form-item-gi>
            </n-grid>
            <n-grid :cols="24" :x-gap="24">
              <n-form-item-gi :span="8" label="&nbsp;">
                <n-button type="primary" @click="handelSave($event,'policy_a')">保存</n-button>
              </n-form-item-gi>
            </n-grid>
          </div>
        </n-form>
      </n-tab-pane>
    </n-tabs>
  </n-card>
  <img-content v-model:show="show_imgs" @update:select="selectedImg"/>
</template>

<script setup lang="ts">
import {computed, onBeforeMount, ref} from 'vue'
import {FormInst, SelectOption, useMessage} from 'naive-ui';
import Editor from '@components/Editor'
import {useWindowResize} from '@/hooks/useWindowReSize.ts';
import {getRequest, postPutRequest} from "@/api/data.ts";
import {Close} from '@vicons/ionicons5'
import {UseAppStore} from '@/stores/app.ts';
import {permsJudg} from '@/util';
import ImgContent from '@components/ImgContent'
import {Config} from '@/config'

const message = useMessage()
const appStore = UseAppStore();
const {height} = useWindowResize();
//短信设置
const sMSOptions = ref<SelectOption[]>([
  {
    label: '阿里云短信',
    value: 'aliyun'
  }, {
    label: '腾讯云短信',
    value: 'tencent'
  }
]);
const show_imgs = ref<boolean>(false);
const add_img_filed = ref<null | string>(null)// 当前选择图片的字段
//基本设置
const basic_form = ref<FormInst | null>(null);
const basicForm = ref({
  title: null,
  logo: null,
  contacts: null,
  phone: null,
  copyright: null,
  icp: null,
  icp_url: null,
});
const basicFormRules = ref({
  title: {
    required: true,
    trigger: ['blur', 'input'],
    message: '网站名称不能为空'
  },
  logo: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请上传网站Logo'
  }
})
const policyForm = ref({
  service: null,
  service_cont: '',
  privacy: null,
  privacy_cont: '',
  reg: null,
  reg_cont: '',
})
const customerForm = ref({
  name: null,
  phone: null,
  qr_code: null,
  name1: null,
  phone1: null,
  qr_code1: null,
  name2: null,
  phone2: null,
  qr_code2: null,
})
const userForm = ref({
  default_avatar: null,//默认头像
  invite_next: 0,//邀请下级开关
  bas_condition: true,
})

//提现设置
interface withdrawalForm {
  way: Array<string>,
  change_interface?: string,
  user_min_money?: number | null | undefined,
  user_max_money?: number | null | undefined,
  user_fees?: number | null | undefined,
  teacher_min_money?: number | null | undefined,
  teacher_max_money?: number | null | undefined,
  teacher_fees?: number | null | undefined,
}

const withdrawal_form = ref<FormInst | null>(null);
const withdrawalForm = ref<withdrawalForm>({
  way: ['balance'],
  change_interface: 'enterprise',
  user_min_money: null,
  user_max_money: null,
  user_fees: null,
  teacher_min_money: null,
  teacher_max_money: null,
  teacher_fees: null,
})
const withdrawalFormRules = ref({
  way: {
    type: 'array',
    required: true,
    trigger: 'change',
    message: '请选择提现方法'
  }
})

//短信设置
interface aliyun {
  enable: number,
  signature: null | string,
  app_id_key: null | string,
  secret_key: null | string,
}

interface tencent {
  enable: number,
  signature: null | string,
  app_id_key: null | string,
  secret_id: null | string,
  secret_key: null | string,
}

const smsOptionData = ref<{ aliyun: aliyun, tencent: tencent }>({})
const sms_form = ref<FormInst | null>(null);
const smsForm = ref({
  type: 'aliyun',
  enable: 0,
  signature: null,
  app_id_key: null,
  secret_id: null,
  secret_key: null,
});
const smsFormRules = computed(() => {
  return {
    type: {
      type: 'string',
      required: true,
      trigger: 'change',
      message: '请选择短信渠道'
    },
    enable: {
      type: 'number',
      required: true,
      trigger: ['blur', 'input'],
      message: '请选择短信渠道'
    },
    signature: {
      required: true,
      trigger: ['blur', 'input'],
      message: '请填写短信签名'
    },
    app_id_key: {
      required: true,
      trigger: ['blur', 'input'],
      // message:  smsForm.value.type == 'aliyun' ? '请填写短信平台APP_KEY' : '请填写短信平台APP_ID'
      message: '请填写短信平台APP_ID'
    },
    secret_id: {
      required: true,
      trigger: ['blur', 'input'],
      message: '请填写短信平台SECRET_ID'
    },
    secret_key: {
      required: true,
      trigger: ['blur', 'input'],
      message: '请填写短信平台SECRET_KEY'
    }
  }
})
//去掉已选中图片
const clearSelectedImg = (type: string) => {
  if (type == 'logo') {
    basicForm.value.logo = null;
  }
  if (type == 'qr_code') {
    customerForm.value.qr_code = null;
  }
  if (type == 'qr_code1') {
    customerForm.value.qr_code1 = null;
  }
  if (type == 'qr_code2') {
    customerForm.value.qr_code2 = null;
  }
  if (type == 'default_avatar') {
    userForm.value.default_avatar = null;
  }
}
//确定已选中图片
const selectedImg = (img_s: Array<{ src: string | any }>) => {
  if (add_img_filed.value == 'logo') {
    basicForm.value.logo = img_s[0].src;
  }
  if (add_img_filed.value == 'qr_code') {
    customerForm.value.qr_code = img_s[0].src;
  }
  if (add_img_filed.value == 'qr_code1') {
    customerForm.value.qr_code1 = img_s[0].src;
  }
  if (add_img_filed.value == 'qr_code2') {
    customerForm.value.qr_code2 = img_s[0].src;
  }
  if (add_img_filed.value == 'default_avatar') {
    userForm.value.default_avatar = img_s[0].src;
  }
  add_img_filed.value = null;
}
const handelSave = (e: MouseEvent, type: string) => {
  e.preventDefault();
  if (type == 'basic') {
    basic_form.value?.validate((errors) => {
      if (!errors) {
        saveSetting('conf/save_basic', basicForm.value, true);
      }
    })
  }
  if (type == 'policy_a') {
    saveSetting('conf/save_policy_a', policyForm.value);
  }
  if (type == 'customer') {
    saveSetting('conf/save_customer', customerForm.value);
  }
  if (type == 'user') {
    saveSetting('conf/save_user', userForm.value);
  }
  if (type == 'withdrawal') {
    withdrawal_form.value?.validate((errors) => {
      if (!errors) {
        saveSetting('conf/save_withdrawal', withdrawalForm.value);
      }
    })
  }
  if (type == 'sms') {
    sms_form.value?.validate((errors) => {
      if (!errors) {
        saveSetting('conf/save_sms', smsForm.value);
      }
    })
  }
}

const saveSetting = (url: string, postData: any, is_basic: boolean = false) => {
  postPutRequest(url, postData).then((result: ResponseResult) => {
    if (result.code === 200) {
      message.success(result.message, {
        duration: 1500,
        onLeave() {
          if (is_basic) {
            appStore.setTitle(basicForm.value.title);
            appStore.setLogo(basicForm.value.logo);
            appStore.setICP(basicForm.value.icp, basicForm.value.icp_url);
            appStore.setCopyright(basicForm.value.copyright);
          }
        }
      })
    } else {
      message.error(result.message);
    }
  })
}
//判断当前设置权限是否存在
const hasPermission = (value: string) => {
  return permsJudg(value);
}
//切换短信渠道
const changeSMSKey = (value: string) => {
  smsForm.value.type = value;
  smsForm.value.enable = smsOptionData.value[value] !== undefined && smsOptionData.value[value].enable !== undefined ? smsOptionData.value[value].enable : 0;
  smsForm.value.signature = smsOptionData.value[value] !== undefined && smsOptionData.value[value].signature !== undefined ? smsOptionData.value[value].signature : null;
  smsForm.value.app_id_key = smsOptionData.value[value] !== undefined && smsOptionData.value[value].app_id_key !== undefined ? smsOptionData.value[value].app_id_key : null;
  smsForm.value.secret_key = smsOptionData.value[value] !== undefined && smsOptionData.value[value].secret_key !== undefined ? smsOptionData.value[value].secret_key : null;
  smsForm.value.secret_id = value == 'aliyun' ? null : smsOptionData.value[value] !== undefined && smsOptionData.value[value].secret_key !== undefined ? smsOptionData.value[value].secret_id : null;
}

const getSettings = async () => {
  await getRequest('conf/get_settings').then((result: ResponseResult) => {
    const {data} = result;
    const Setting: any = JSON.parse(data);
    if (Setting.basic !== undefined) {
      basicForm.value.title = Setting.basic.title !== undefined ? Setting.basic.title : null;
      basicForm.value.logo = Setting.basic.logo !== undefined ? Setting.basic.logo : null;
      basicForm.value.contacts = Setting.basic.contacts !== undefined ? Setting.basic.contacts : null;
      basicForm.value.phone = Setting.basic.phone !== undefined ? Setting.basic.phone : null;
      basicForm.value.copyright = Setting.basic.copyright !== undefined ? Setting.basic.copyright : null;
      basicForm.value.icp = Setting.basic.icp !== undefined ? Setting.basic.icp : null;
      basicForm.value.icp_url = Setting.basic.icp_url !== undefined ? Setting.basic.icp_url : null;
    }
    if (Setting.customer !== undefined) {
      customerForm.value.name = Setting.customer.name !== undefined ? Setting.customer.name : null;
      customerForm.value.phone = Setting.customer.phone !== undefined ? Setting.customer.phone : null;
      customerForm.value.qr_code = Setting.customer.qr_code !== undefined ? Setting.customer.qr_code : null;
      customerForm.value.name1 = Setting.customer.name1 !== undefined ? Setting.customer.name1 : null;
      customerForm.value.phone1 = Setting.customer.phone1 !== undefined ? Setting.customer.phone1 : null;
      customerForm.value.qr_code1 = Setting.customer.qr_code1 !== undefined ? Setting.customer.qr_code1 : null;
      customerForm.value.name2 = Setting.customer.name2 !== undefined ? Setting.customer.name2 : null;
      customerForm.value.phone2 = Setting.customer.phone2 !== undefined ? Setting.customer.phone2 : null;
      customerForm.value.qr_code2 = Setting.customer.qr_code2 !== undefined ? Setting.customer.qr_code2 : null;
    }
    if (Setting.policy_a !== undefined) {
      policyForm.value.service = Setting.policy_a.service !== undefined ? Setting.policy_a.service : null;
      policyForm.value.service_cont = Setting.policy_a.service_cont !== undefined ? Setting.policy_a.service_cont : '';
      policyForm.value.privacy = Setting.policy_a.privacy !== undefined ? Setting.policy_a.privacy : null;
      policyForm.value.privacy_cont = Setting.policy_a.privacy_cont !== undefined ? Setting.policy_a.privacy_cont : '';
      policyForm.value.reg = Setting.policy_a.reg !== undefined ? Setting.policy_a.reg : null;
      policyForm.value.reg_cont = Setting.policy_a.reg_cont !== undefined ? Setting.policy_a.reg_cont : '';
    }
    if (Setting.user !== undefined) {
      userForm.value.default_avatar = Setting.user.default_avatar !== undefined ? Setting.user.default_avatar : null;
      userForm.value.invite_next = Setting.user.invite_next !== undefined ? parseInt(Setting.user.invite_next) : 0;
      userForm.value.bas_condition = Setting.user.bas_condition !== undefined ? JSON.parse(Setting.user.bas_condition) : true;
    }
    if (Setting.withdrawal !== undefined) {
      withdrawalForm.value.way = Setting.withdrawal.way;
      withdrawalForm.value.change_interface = Setting.withdrawal.change_interface;
      withdrawalForm.value.user_min_money = Setting.withdrawal.user_min_money !== undefined ? parseFloat(Setting.withdrawal.user_min_money) : null;
      withdrawalForm.value.user_max_money = Setting.withdrawal.user_max_money !== undefined ? parseFloat(Setting.withdrawal.user_max_money) : null;
      withdrawalForm.value.user_fees = Setting.withdrawal.user_fees !== undefined ? parseFloat(Setting.withdrawal.user_fees) : null;
      withdrawalForm.value.teacher_min_money = Setting.withdrawal.teacher_min_money !== undefined ? parseFloat(Setting.withdrawal.teacher_min_money) : null;
      withdrawalForm.value.teacher_max_money = Setting.withdrawal.teacher_max_money !== undefined ? parseFloat(Setting.withdrawal.teacher_max_money) : null;
      withdrawalForm.value.teacher_fees = Setting.withdrawal.teacher_fees !== undefined ? parseFloat(Setting.withdrawal.teacher_fees) : null;
    }
    if (Setting.sms !== undefined) {
      smsOptionData.value = Setting.sms;
      const sms_enable = Object.keys(Setting.sms)
          .filter(key => Setting.sms[key].enable === 1)
          .map(key => ({
            ...Setting.sms[key],
            type: key
          }))[0];
      if (sms_enable === undefined) {
        const firstObject = Object.values(Setting.sms)[0];
        smsForm.value.type = Object.keys(Setting.sms)[0];
        smsForm.value.enable = firstObject.enable !== undefined ? firstObject.enable : 0;
        smsForm.value.signature = firstObject.signature !== undefined ? firstObject.signature : null;
        smsForm.value.app_id_key = firstObject.app_id_key !== undefined ? firstObject.app_id_key : null;
        smsForm.value.secret_key = firstObject.secret_key !== undefined ? firstObject.secret_key : null;
        smsForm.value.secret_id = firstObject.secret_id !== undefined ? firstObject.secret_id : null;
      } else {
        smsForm.value = sms_enable;
      }
    }
  })
}
onBeforeMount(() => {
  getSettings();
})
</script>

<style scoped lang="scss">
.titles {
  font-weight: 500;
}

.muted {
  font-size: 12px;
  color: #999999;
  padding-left: 16px;
}
</style>
